<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="canvas"></canvas>
</body>

<script>
    window.onload = function () {
        //写逻辑
        let canvas = document.getElementById('canvas');
        let cxt = canvas.getContext('2d');

        const width = 400;
        const height = 400;

        canvas.width = width;
        canvas.height = height;

        let x;
        let y;

        let hour;
        let minute;
        let second;

        cxt.font = "bold 14px Arial";
        cxt.textAlign = "center";
        cxt.textBaseLine = "middle";
        

        setInterval(() => {

            cxt.clearRect(0, 0, width, height);

            cxt.beginPath();
            cxt.fillStyle = "#d9ddd8";
            cxt.strokeStyle = "#e5d4a8";
            cxt.lineWidth = 3;
            cxt.arc(200, 200, 200, 0, 2 * Math.PI, false);
            cxt.stroke();
            cxt.closePath();

            cxt.beginPath();
            cxt.strokeStyle = "#84c2b3";
            
            for (let i = 3; i >= -8; i--) {
                cxt.lineWidth = 4;
                x = 200 * Math.sin(Math.PI / 6 * i);
                y = 200 * Math.cos(Math.PI / 6 * i);

                cxt.moveTo(200 + y, 200 - x);
                cxt.lineTo(200 + y - y / 10, 200 - x + x / 10);

                cxt.fillStyle = "black";

                if (i >= 1 || (i >= -8 && i <= -7)) {
                    if (i == 3) {
                        cxt.fillText("12", 200 + y - y / 10, 200 - x + x / 10 + 15);
                    }
                    else {
                        cxt.fillText(String(3 - i), 200 + y - y / 10, 200 - x + x / 10 + 15);
                    }

                }
                else if (i == 0) {
                    cxt.fillText("3", 200 + y - y / 10 - 10, 200 - x + x / 10 + 5);
                }
                else if (i == -6) {
                    cxt.fillText("9", 200 + y - y / 10 + 10, 200 - x + x / 10 + 5);
                }
                else {
                    cxt.fillText(String(3 - i), 200 + y - y / 10, 200 - x + x / 10 - 6);
                }

                cxt.fill();


            }
            cxt.stroke();
            cxt.closePath();

            cxt.beginPath();
            for (let i = 1; i <= 59; i++) {
                cxt.lineWidth = 2;
                x = 200 * Math.sin(Math.PI / 30 * i);
                y = 200 * Math.cos(Math.PI / 30 * i);

                if (i % 5 != 0) {
                    cxt.moveTo(200 + x, 200 - y);
                    cxt.lineTo(200 + x - x / 20, 200 - y + y / 20);
                }

            }
            cxt.stroke();
            cxt.closePath();

            cxt.beginPath();
            for (let i = 1; i <= 59; i++) {
                cxt.lineWidth = 2;
                x = 40 * Math.sin(Math.PI / 6 * i);
                y = 40 * Math.cos(Math.PI / 6 * i);

                cxt.moveTo(130 + x, 280 - y);
                cxt.lineTo(130 + x - x / 10, 280 - y + y / 10);

            }

            cxt.stroke();
            cxt.closePath();


            hour = new Date().getHours();
            minute = new Date().getMinutes();
            second = new Date().getSeconds();

            cxt.beginPath();
            cxt.strokeStyle = "#898e8b";
            cxt.arc(130, 280, 40, 0, 2 * Math.PI, false);
            cxt.stroke();
            cxt.closePath();
            

            cxt.beginPath();
            cxt.lineCap = 'round';
            cxt.lineWidth = 5;
            cxt.strokeStyle = "#7c817e";

            x = 30 * Math.sin(Math.PI / 30 * second);
            y = 30 * Math.cos(Math.PI / 30 * second);

            cxt.moveTo(130, 280);
            cxt.lineTo(130 + x, 280 - y);

            cxt.stroke();
            cxt.closePath();

            cxt.beginPath();
            cxt.lineCap = 'round';
            cxt.lineWidth = 5;
            cxt.strokeStyle = "rgb(227, 140, 99)";

            x = 100 * Math.sin(Math.PI / 6 * hour);
            y = 100 * Math.cos(Math.PI / 6 * hour);

            cxt.moveTo(200, 200);
            cxt.lineTo(200 + x, 200 - y);

            cxt.stroke();
            cxt.closePath();


            cxt.beginPath();
            cxt.lineCap = 'round';
            cxt.lineWidth = 5;
            cxt.strokeStyle = "rgb(227, 140, 99)";

            x = 150 * Math.sin(Math.PI / 30 * minute);
            y = 150 * Math.cos(Math.PI / 30 * minute);

            cxt.moveTo(200, 200);
            cxt.lineTo(200 + x, 200 - y);

            cxt.stroke();
            cxt.closePath();

        }, 1000)


    }
</script>

</html>